<template>
	<NavBarVue title="进店逛逛" />
	<view class="jind">
		<view class="main">
			<view style="width: 100%;height: 380rpx;overflow: hidden;">
				<BaseCoverImage :src="shopInfos?.storeLogo" />
			</view>
			<view class="asght">
				<view class="tex">
					<view class="left">
						<view>{{shopInfos?.storeHeadName}}</view>
						<view class="bt">收藏</view>
					</view>
<!-- 					<view class="right" @click='goDetails'>
						<view class="phon">详情/电话</view>
						<view style="margin-top: 30rpx;">
							<u-icon name="arrow-right" color="#666" size="12"></u-icon>
						</view>
					</view> -->
				</view>
				<view style="font-size: 24rpx; color:#999" class="sc">{{shopInfos?.storeIntroduction}}-商场</view>
				<view class="batw">
					<view class="yytime">
						<view style="display: flex;">
							<u-icon name="clock" color="#666" size="12"></u-icon>
							<view class="sj">营业时间 {{shopInfos?.tradeTime}}</view>
						</view>
						<view>
							<u-icon name="arrow-right" color="#666" size="12"></u-icon>
						</view>
					</view>
					<view class="yytime">
						<view style="display: flex;">
							<u-icon name="clock" color="#666" size="12"></u-icon>
							<view class="sj">{{shopInfos?.updateTime}}</view>
						</view>
						<view>
							<u-icon name="arrow-right" color="#666" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- Liebiao -->
			<view class="yle">
				<view class="ul">
					<view class="li" v-for="item in youlist" :key="item.id">
						<view class="ttop">
							<view style="font-size: 30rpx; font-weight: 600;">{{item.name}}</view>
							<view style="color:#999; font-size:28rpx">活动时间：{{item.times}}</view>
						</view>
						<view class="bott">
							<BaseCoverImage :src="item.img" style="width: 100rpx;height: 100rpx;border-radius: 10rpx;margin-right: 40rpx;"/>
							<view>
								<view>{{item.to}}</view>
								<view>数量：{{item.too}}</view>
								<view>{{item.tooo}}</view>
							</view>
						</view>
						<view class="an">
							<view class="lq">领取优惠券</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		onMounted,
		ref,
		computed
	} from 'vue';
	import {onLoad} from "@dcloudio/uni-app"
	import {useShopStore} from '@/store'
	
	const shopId = ref(null)
	onLoad((e) => {
		console.log(e.id, "| e.item");
		shopId.value = e.id
	})
	
	const shopStore = useShopStore()
	onMounted(async () => {
		await shopStore.shopInfo(shopId.value)
	})
	
	let shopInfos = computed(() => {
		console.log(shopStore?.shopInfoData?.shopInfos, "| shopStore?.shopInfoData?.shopInfos");
		return shopStore?.shopInfoData?.shopInfos
	})
	//游玩
	const youlist = reactive([{
			id: 0,
			name: "彻夜畅玩场",
			times: "21:00-02:00",
			img: "/static/youle.png",
			to: "21:00至次日06:00内",
			too: "20",
			tooo: "康师傅系列6瓶+抽纸（可换百岁山，果粒橙）"
		},
		{
			id: 1,
			name: "午间大包间",
			times: "13:00-15:00",
			img: "/static/youle2.png",
			to: "21:00至次日06:00内",
			too: "20",
			tooo: "康师傅系列3瓶+抽纸（可换百岁山，果粒橙）"
		},
		{
			id: 2,
			name: "暗夜畅玩场",
			times: "21:00-02:00",
			img: "/static/youle.png",
			to: "21:00至次日06:00内",
			too: "20",
			tooo: "康师傅系列5瓶+抽纸（可换百岁山，果粒橙）"
		},
	])
</script>

<style scoped lang="scss">
	.jind {
		width: 100vw;
		height: calc(100vh - 80rpx);
		overflow: hidden;
		background: #f2f2f2;
	}

	.main {
		width: 100vw;
		height: calc(100vh - 80rpx);
		overflow: auto;
	}

	.login_top {
		margin-top: 30rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		background: white;

		.top_p {
			flex: 1;
			text-align: center;
			font-weight: bold;
		}
	}

	.asght {
		width: 100%;
		height: auto;
		background: white;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
	}

	.tex {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 40rpx;
		color: #444;
		background: white;
		font-weight: 600;

		.left {
			display: flex;

			.bt {
				margin-top: 18rpx;
				margin-left: 20rpx;
				font-size: 24rpx;
				width: 120rpx;
				font-weight: 400;
				height: 48rpx;
				line-height: 48rpx;
				background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
				color: #fff;
				text-align: center;
				border-radius: 30rpx;
			}
		}

		.right {
			display: flex;

			.phon {
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.sj {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	.batw {
		margin-top: 40rpx;
	}

	.yytime {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		justify-content: space-between;
		background: white;
	}

	.sc {
		width: 100%;
		height: 40rpx;
		background: white;
		margin-top: 10rpx;
	}

	.ttop {
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		padding: 4rpx 0rpx;
	}

	.yle .ul .li {
		width: 100%;
		height: auto;
		background: white;
		margin-top: 18rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.bott {
		margin-top: 20rpx;
		width: 100%;
		height: auto;
		display: flex;
		font-size: 24rpx;
	}

	.an {
		display: flex;
		justify-content: flex-end;
	}

	.lq {
		margin-top: 30rpx;
		font-size: 24rpx;

		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
		color: white;
		border-radius: 30rpx;
	}
</style>